<script setup>
import { useRouter } from 'vue-router'
import { UserFilled, Document } from '@element-plus/icons-vue'

defineProps({
  item: Object,
})

const router = useRouter()

const toTopicPage = (id) => {
  // console.log(id)
  router.push(`/topic/${id}`)
}
</script>

<template>
  <div
    @click="toTopicPage(item.id)"
    class="w-full h-[300px] rounded-lg overflow-hidden relative bg-[--fill-1] cursor-pointer flex flex-col group hover:-translate-y-1 hover:shadow-lg transition-all">
    <img :src="item?.bgImage" alt="" class="w-full h-[150px] object-cover flex-shrink-0" />

    <img
      :src="item?.coverImage"
      alt=""
      class="w-[45px] h-[45px] object-cover rounded-full absolute top-[130px] left-[15px] border-[3px] border-[--fill-1] group-hover:border-[#f2f2f2]" />

    <div class="p-4 pt-10 pb-4 flex justify-between flex-col flex-1 group-hover:bg-[#f2f2f2]">
      <div>
        <div class="font-semibold">{{ item?.topicName }}</div>
        <div class="text-sm line-clamp-2">{{ item?.description }}</div>
      </div>
      <div class="flex justify-between items-center text-xs mt-4">
        <div class="flex items-center gap-1 text-blue-600 font-semibold">
          <el-icon><UserFilled /></el-icon>
          <span>{{ item?.userNum }}成员</span>
        </div>
        <div class="flex items-center gap-1 text-orange-500 font-semibold">
          <el-icon><Document /></el-icon>
          <span>{{ item?.postCount }}帖子</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss"></style>
